#@head() 
#@header()
<title>辅助工具</title>
#@aside("marketing")
<script type="text/javascript" src="#(path)/assets/webuploade/webuploader.js"></script>
<link rel="stylesheet" type="text/css" href="#(path)/assets/webuploade/webuploader.css">
/assets/webuploade
<div class="content-wrapper">
	<section class="content">
		<div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
             <li class="active"><a href="#(path)/admin/page/marketing-apphelp">修改轮播图</a></li>
              <!--<li class="active"><a href="#tab_2" data-toggle="tab" aria-expanded="false">还款管理</a></li>-->
            </ul> 
            <div class="tab-content">
              <div class="tab-pane active" id="tab_1">
				<div class="box-body">
					<table id="example1" style="width:800px;" class="table table-striped">
						<tbody>
							<tr>
								<th align="right" style="width:100px;">名 称：</th>
								<td><input id="name" type="text" class="form-control" placeholder="名称"></td>
							</tr>
							<tr>
								<th align="right" style="width:100px;">是否上线：</th>
								<td>
									<select id="status" class="form-control">
										<option value="enable">是</option>
										<option value="disable">否</option>
									 </select>
								</td>
							</tr> 
							<tr>
								<th align="right" style="width:100px;">排 序：</th>
								<td><input id="dsporder" type="text" class="form-control" placeholder="排序"></td>
							</tr>
							<tr>
								<th align="right" style="width:100px;">app链接地址：</th>
								<td><input id="link" type="text" class="form-control" placeholder="链接地址"></td>
							</tr>
							<tr>
								<th align="right" style="width:100px;">图片地址：</th>
								<td><input id="pic" type="text" disabled class="form-control" placeholder="图片地址"></td>
							</tr>
							<tr>
								<th align="right" style="width:100px;">app图片上传：</th>
								<td>
									<div id="uploader-demo">
										<!--用来存放item-->
										<div id="fileList" class="uploader-list"></div>
										<div style="clear:both;" id="filePicker">选择图片</div>
									</div>
								</td>
							</tr>
							<tr>
								<th align="right" style="width:100px;">pc链接地址：</th>
								<td><input id="pcLink" type="text" class="form-control" placeholder="链接地址"></td>
							</tr>
							<tr>
								<th align="right" style="width:130px;">pc图片地址：</th>
								<td><input id="image" type="text" disabled class="form-control" placeholder="图片地址"></td>
							</tr>
							<tr>
								<th align="right" style="width:130px;">pc图片上传：</th>
								<td>
									<div id="uploader-demo">
										<!--用来存放item-->
										<div id="fileList2" class="uploader-list"></div>
										<div style="clear:both;" id="filePicker2">选择图片</div>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="box-footer">
					<button id="submit_addcarousel" type="submit" style="margin-left:50px;" class="btn btn-info ">提交</button>
					<button onclick="window.location.href='#(path)/admin/page/marketing-appcarousel'" type="submit" style="margin-left:10px;" class="btn  ">取消</button>
				</div>
              </div>
            </div> 
            <!-- /.tab-content -->
          </div>
	</section>
</div>
#@footer()
<script type="text/javascript" src="#(path)/assets/js/imageUpload.js"></script>
<script>

$(document).ready(function(){
	var id = GetRequest(id);
	$.getJSON("/slider/info?token=#(session.token??)&id="+id.id, function(userinfo) {
		 console.log(userinfo);
		var item = userinfo.data;
		$("#name").val(item.name);
		$("#dsporder").val(item.dsporder);
		$("#link").val(item.link);
		$("#pic").val(item.pic);
		$("#status").val(item.status); 
		$("#type").val(item.type);
		$("#image").val(item.image);
		$("#pcLink").val(item.pc_link);
	});
	function GetRequest() {  
	   var url = location.search; //获取url中"?"符后的字串  
	   var theRequest = new Object();  
	   if (url.indexOf("?") != -1) {  
		  var str = url.substr(1);  
		  strs = str.split("&");  
		  for(var i = 0; i < strs.length; i ++) {  
			 theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);  
		  }  
	   }  
	   return theRequest;  
	}  
	// 初始化Web Uploader
	var uploader = WebUploader.create({

		// 选完文件后，是否自动上传。
		auto: true,
		duplicate :true,
		// swf文件路径
		swf: '/assets/plugins/webuploader/Uploader.swf',

		// 文件接收服务端。
		server: '/sys/uploadFile',

		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick: '#filePicker2',

		// 只允许选择图片文件。
		accept: {
			title: 'Images',
			extensions: 'gif,jpg,jpeg,bmp,png',
			mimeTypes: 'image/*'
		}
	}); 
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
		var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' +'<img>' +'<div class="info">' + file.name + '</div>' +'</div>'),
		$img = $li.find('img');
		$("#fileList2").empty();
		// $list为容器jQuery实例
		$("#fileList2").append( $li );
		
		// 创建缩略图
		// 如果为非图片文件，可以不用调用此方法。
		// thumbnailWidth x thumbnailHeight 为 100 x 100
		uploader.makeThumb( file, function( error, src ) {
			if ( error ) {
				$img.replaceWith('<span>不能预览</span>');
				return;
			}
			$img.attr( 'src', src );
		},100,100);
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
		var $li = $( '#'+file.id ),$percent = $li.find('.progress span');
		// 避免重复创建
		if ( !$percent.length ) {
			$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');
		}
		$percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function(file,response) {
		$('#'+file.id).addClass('upload-state-done');
		$('#'+file.id).find('img').attr('src',"/attachment/"+response['url'] );
		src = "/attachment"+response['url'];
		$("#image").val(src);
	});

	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
		var $li = $( '#'+file.id ),$error = $li.find('div.error');

		// 避免重复创建
		if ( !$error.length ) {
			$error = $('<div class="error"></div>').appendTo( $li );
		}
		$error.text('上传失败');
	});

	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
		$( '#'+file.id ).find('.progress').remove();
	});
	/*$("#submit_addcarousel").click(function(){
		var neirong = UM.getEditor('myEditor').getContent();
		 
		ajax("/notice/edit?token=#(session.token??)",
			{"type":$("#type").val(),"summary":$("#summary").val(),"pic":$("#pic").val(),"image":$("#image").val(),"contents":neirong,"name":$("#name").val(),"status":$("#status").val()},function(data){
			 
			if(data.code=='success'){
				layer.msg(data.msg,{icon:1,time:1000},function(){
					window.history.go(-1) ;
					//window.location.href="#(path)/admin/page/marketing-appnews";
				}); 
			}else{
				layer.msg(data.msg,{icon:2,time:2000}); 
			}
		});
	});*/
	
	$("#submit_addcarousel").click(function() {
		layer.confirm('是否确认提交？', {btn : [ '确认', '取消' ]}, function() {
			var params = getFormVals("#tab_1");
			ajax("#(path)/slider/edit?token=#(session.token??)&id="+id.id,params,function(data){
				if(data.code=='success'){
					layer.msg(data.msg, {icon:1},function(){
						location.href="#(path)/admin/page/marketing-appcarousel"
					});
				}else if(data.code=='error'){
					layer.msg(data.msg, {icon : 2});
				}
			});
		}, function() {
			layer.msg('已取消！', {icon : 1});
		});
	});
});
</script>
</body>
</html>

